<template>
  <view class="w-[100vw] h-[100vh]">
    <view class="w-full flex justify-center mt-[20vh]">
      <button v-if="radioValue" class="tb_button flex justify-center items-center" @click="handleLogin">登录</button>
      <button v-else class="tb_button flex justify-center items-center" @click="showTip">手机号一键登录</button>
    </view>
    <view class="w-full text-[24rpx] mt-[43vh]">
      <up-radio-group v-model="radioValue">
        <view class="flex justify-center items-center w-full">
          <up-radio :name="true"></up-radio>
          我已阅读并同意
          <text class="text-[#5260F3]">《用户服务协议》</text>
          <text class="text-[#5260F3]">《隐私协议》</text>
        </view>
      </up-radio-group>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import UserApi from '@/apis/user';

const radioValue = ref(false);

const showTip = () => {
  uni.showToast({
    title: '请阅读并同意用户服务协议和隐私协议!',
    duration: 2000,
    icon: 'none',
  });
};

// !注意：此处仅为示例，实际开发中请替换为实际的登录逻辑
const handleLogin = async () => {
  try {
    const res = await UserApi.login({ user: 123, password: 123 });

    if (!res) return;
  } finally {
    uni.setStorageSync('token', 123);

    uni.redirectTo({
      url: '/pages/module-home/index',
    });
  }
};
</script>

<style lang="scss" scoped>
.tb_button {
  width: 556rpx;
  height: 96rpx;
  margin-top: 162rpx;
  color: #ffffff;
  font-weight: bold;
  font-size: 32rpx;
  background: linear-gradient(90deg, #4a63f1 0%, #874ffd 100%);
  border-radius: 48rpx;
}
::v-deep(.u-radio-group) {
  flex: none !important;
}
</style>
